<style>
	.flex{
		display: flex;
		align-items: center;
	}
	.page{
		background: #f8f8f8;
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
	.goods-detail-head{
		width: 100%;
		background: #fff;
		border-top: 2rpx solid #e5e5e5;
	}
	.goods-head-info{
		width: 90%;
		margin: 0 auto;
		padding-bottom: 16rpx;
	}
	.goods-name{
		font-size: 38rpx;
		font-weight: bold;
	}
	.goods-price{
		color: #f55959;
		font-size: 38rpx;
		margin-top: 5rpx;
		margin-top: 25rpx;
	}
	.goods-price-symbol{
		font-size: 28rpx;
		float: left;
		position: relative;
		top: 10rpx;
	}
	.goods-extra{
		margin-top: 10rpx;
		overflow: hidden;
	}
	.goods-extra-is-new{
		float: left;
		width: 85rpx;
		height: 35rpx;
		text-align: center;
		line-height: 35rpx;
		background: #eaeaea;
		color: #b2b2b2;
		font-size: 25rpx;
		border-radius: 8rpx;
	}
	.goods-extra-address{
		font-size: 25rpx;
		float: right;
	}
	.goods-content{
		margin: 10rpx 0;
		background: #fff;
	}
	.content-box{
		width: 90%;
		color: #737373;
		margin: 0 auto;
	}
	.content-box image{
		width: 100%;
		border-radius: 20rpx;
	}
	.content-title{
		padding-top: 30rpx;
		font-weight: bold;
		color: #000;
		font-size: 32rpx;
	}
	.content{
		font-size: 27rpx;
		margin: 11rpx 0rpx 15rpx 0rpx;
	}
	.store-content{
		height: 222rpx;
		background: #FFFFFF;
		margin-bottom: 10rpx;
		padding: 0 45rpx;
	}
	.store-content .title{
		font-size: 30rpx;
		position: relative;
		padding-left: 25rpx;
		line-height: 60rpx;
		margin-bottom: 18rpx;
	}
	.store-content .title:after{
		content: '';
		position: absolute;
		width: 12rpx;
		height: 12rpx;
		background: #1d730c;
		left: 0;
		top: 50%;
		margin-top: -6rpx;
	}
	.store-content .cont{
		justify-content: space-between;
	}
	.store-content .store-pic{
		width: 98rpx;
		height: 98rpx;
		display: block;
		border-radius: 50%;
		margin-right: 30rpx;
	}
	.store-content .next{
		width: 100rpx;
		justify-content: flex-end;
		height: 98rpx;
	}
	.store-content .transfer_icon{
		width: 17rpx;
		height: 31rpx;
		display: block;
	}
	.store-content .store-info{
		width: 400rpx;
	}
	.store-content .store-info .name{
		font-size: 30rpx;
		height: 40rpx;
		overflow: hidden;
	}
	.store-content .store-info .moible{
		font-size: 30rpx;
		color: #323232;
		margin-top: 7rpx;
	}
	.store-content .store-info .moible image{
		display: block;
		width: 20rpx;
		height: 19rpx;
		margin-right: 8rpx;
	}
	.want-btn-bg{
		width: 100%;
		height: 100rpx;
	}
	.want-btn{
		position: fixed;
		z-index: 9;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0 8rpx 14rpx rgba(101,101,101,0.6);
	}
	.want-btn .share text{
		display: block;
		color: #808080;
		font-size: 26rpx;
		width: 124rpx;
		text-align: center;
	}
	.want-btn .share .transfer_share{
		width: 33rpx;
		height: 39rpx;
		display: block;
		margin: 0 auto;
	}
	.want-btn .btn{
		width: 617rpx;
		height: 78rpx;
		line-height: 78rpx;
		background: #f55959;
		text-align: center;
		color: #FFFFFF;
		font-size: 34rpx;
		border-radius: 10rpx;
	}
	.want-btn .gay{
		background: #CCCCCC !important;
	}
	.u-popup-mask {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100vw;
	    height: 100vh;
	    background: rgba(0, 0, 0, .5);
	    z-index: 50;
	    transition: .3s;
	}
	.z-show {
	    transform: translateY(0) !important;
	}
	/* 分享弹框 */
	.m-full-loading{
		z-index: 54;
	}
	.g-popup-share {
	    position: fixed;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	    background: #fff;
	    transform: translateY(100%);
	    transition: .3s;
		z-index: 53;
	}
	.g-popup-share .g-share-type {
	    display: flex;
	    padding: 15px 0;
	}
	.g-popup-share .g-share-type button {
	    flex: 1;
	    text-align: center;
	}
	.g-popup-share .g-share-type image {
	    width: 75upx;
		height: 75upx;
	}
	.g-popup-share .u-share-cancel {
	    background: #a4a4a4;
	    padding: 10px 0;
	    color: #fff;
	}
	.prod-info .s-title{
		color: #000000;
		font-size: 30rpx;
		line-height: 80rpx;
	}
	.prod-info {
		background: #FFFFFF;
		margin-top: 6rpx;
	}
	.prod-info .describe,.prod-info .parameter{
		padding:0 5%;
		border-top: 4rpx solid #f8f8f8;
		padding-bottom: 20rpx;
	}
	.prod-info .describe .text{
		color: #666666;
		font-size: 28rpx;
		word-wrap: break-word;
		word-break: normal;
	}
	.prod-info .parameter .list{
		display: flex;
		flex-wrap:wrap;
	}
	.prod-info .parameter .list .type{
		color: #666666;
		font-size: 28rpx;
		margin-right: 80rpx;
		line-height: 40rpx;
		margin-bottom: 4rpx;
	}
	.prod-info .parameter .items{
		display: flex;
		flex-wrap: wrap;
		padding-top: 5rpx;
	}
	.prod-info .parameter .items text{
		color: #666666;
		font-size: 28rpx;
		border: 1px solid #4c4b4b;
		line-height: 38rpx;
		border-radius: 8rpx;
		padding: 0 12rpx;
		margin-right: 15rpx;
	}
</style>
<template>
	<view class="page">
		<view class="goods-detail-head">
			<view class="goods-head-info">
				<!-- <view class="goods-price">
					<view class="goods-price-symbol">￥</view>{{transfer_data.buyout_price}}
				</view> -->
				<view class="goods-extra">
					<view class="goods-extra-is-new">
						{{transfer_data.is_new_text}}
					</view>
					<view class="goods-extra-address" v-if="address_text.city">
						{{address_text.city}} | {{address_text.zone}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="goods-content">
			<view class="content-box">
				<view class="content-title">
					宝贝描述
				</view>
				<view class="content">{{transfer_data.content}}</view>
				<video :src="transfer_data.video_src" controls v-if="transfer_data.video_src" :poster="transfer_data.photos_text[0]"></video>
				<block v-if="!transfer_data.video_src">
					<image :src="item" mode="widthFix" v-for="(item, index) in transfer_data.photos_text" :key="index"></image>
				</block>
			</view>
		</view>
		
		<view class="store-content">
			<view class="title">商家信息</view>
			<view class="cont flex">
				<view class="info flex">
					<image class="store-pic" :src="member.head_pic_text"></image>
					<view class="store-info" @tap="call_merchant(member.mobile)">
						<view class="name">{{member.nickname}}</view>
						<view class="moible flex" v-if="member.mobile">
							<image src="../../static/icons/transfer/transfer_phone.png"></image>{{member.mobile}}
						</view>
					</view>
				</view>
				<navigator open-type="navigate" class="next flex" :url="'/pages/transfer/transfer_merchant?merchant_id=' + member.member_id">
					<image class="transfer_icon" src="../../static/icons/transfer/transfer_icon.png"></image>
				</navigator>
			</view>
		</view>
		<view class="want-btn-bg"></view>
		<view class="want-btn flex">
			<view class="share" @tap="toggleShare">
				<image class="transfer_share" src="../../static/icons/transfer/transfer_share.png"></image>
				<text>分享</text>
			</view>
			<block v-if="can_order">
				<navigator open-type="navigate" :url="'/pages/transfer/entrust_confirm?goods_id=' + goods_id" class="btn">我想要</navigator>
			</block>
			<block v-else>
				<view class="btn gay">我想要</view>
			</block>
		</view>
		
		<!-- 弹框蒙版 -->
		<view class="u-popup-mask" v-if="sPopup" @tap="toggleShare" @touchmove.stop=""></view>
		<!-- 分享弹框 -->
		<view class="g-popup-share" @touchmove.stop="" :class="[sPopup ? 'z-show' : '']">
		    <view class="g-share-type">
		        <button @tap="share('weixin','WXSceneSession')">
		            <image src="../../static/icons/wxpay.png" mode="widthFix"></image>
		            <view>微信好友</view>
		        </button>
		        <button @tap="share('weixin','WXSenceTimeline')">
		            <image src="../../static/icons/weixin_friend.png" mode="widthFix"></image>
		            <view>朋友圏</view>
		        </button>
		    </view>
		    <button class="u-share-cancel" @tap="toggleShare">取消</button>
		</view>
		<view class="m-full-loading" v-if="bIsShowLoading">
			<view class="m-loading">
				<image src="../../static/images/loading.gif" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import henglang from '@/common/common.js';
	export default { 
		data() {
			return {
				transfer_data: {},
				address_text:{},
				bIsShowLoading: false,
				member: [],
				sPopup: false,
				goods_id:'',
				shareData:{},
				can_order:true,
				pageTpye:''
			}
		},
		onLoad(options){
			let that = this;
			that.bIsShowLoading = true;
			that.goods_id = options.id
			that.pageTpye = options.pageTpye
			henglang.get('Pawn/transfer_view',{id: options.id},false,function(res){
				that.bIsShowLoading = false;
				that.transfer_data = res.data;
				that.address_text = that.transfer_data.address_text
				that.member = res.data.member;
				that.shareData = res.data.share;
				that.can_order = res.data.can_order
			});
		},
		methods:{
			call_merchant(mobile){
				uni.makePhoneCall({
				    phoneNumber: mobile
				});
			},
			// 显示/隐藏分享框
			toggleShare(){
				this.sPopup = !this.sPopup
			},
			share(type, wx = '') { // 调用分享
				let that = this
				that.bIsShowLoading = true;
				uni.share({
			        provider: type,
			        scene: wx,
			        type: 0,
			        href: that.shareData.url,
			        title: that.shareData.title,
			        summary: that.shareData.description,
			        imageUrl: that.shareData.thumb,
			        success: function(res) {
						that.bIsShowLoading = false
					},
			        fail: function(err) {
						that.bIsShowLoading = false
					}
			    });
				setTimeout(() => {
					that.bIsShowLoading = false;
				}, 3000)
			}
		}
	}
	
</script>